<script>
import {quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
export default {
  components: {
    quillEditor
  },
  data() {
    const userJson = localStorage.getItem("user");
    let userId = '';
    let status = ''
    if (userJson) {
      const user = JSON.parse(userJson);
      userId = user.id;
      status = user.status
    }
    return {
      dataForm: {
        courseTypeName: '',
        typeName: '',
        teacherName: userId,
        courseDescription: '',
        courseHover: '',
      },
      typeOption: [],
      courseId:'',
      dataRule: {
        courseName: [
          {required: true, message: '课程标题不能为空', trigger: 'blur'}
        ],

        courseTypeName: [
          {required: true, message: '课程类型不能为空', trigger: 'blur'}
        ],
        courseHover: [
          {required: true, message: '课程封面不能为空', trigger: 'blur'}
        ],
        courseDescription: [
          {required: true, message: '课程描述不能为空', trigger: 'blur'}
        ],

      }
    }
  },
  created() {
    this.getCourseType()
  },
  methods: {
    getCourseType() {
      this.request.get('/course/coursetype/findCourseTypeList')
          .then(res => {
            if (res.code === 0) {
              console.log(res.articleTypeList, 'sadsad');
              this.typeOption = res.courseTypeList;
            } else {
              this.typeOption = [];
            }
          })

    },
    handlePreview(file) {
      console.log(file);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dataForm.courseHover = file.url;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, 'res')
      console.log(file, 'file')
      this.dataForm.courseHover = res.msg

      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file.type, 'file')
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPng) {
        this.$message.error('上传头像图片只能是 JPG或PNG格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
    dataFormSubmit(){
      this.request.post('/course/course/save',this.dataForm)
          .then(res=>{
            if (res.code===200){
              this.$message.success(res.message);
              this.courseId=res.courseId
              this.$router.push({
                path: '/publishChapter',
                query: { courseId: this.courseId }
              });
            }else if (res.code===400){
              this.$message.error(res.message);

            }
          })
    }
  }
}
</script>

<template>

  <div class="container">
    <div style="margin-top: 10px;width: 800px;margin-left: 200px">
      <el-steps :active="1">
        <el-step title="发布课程" icon="el-icon-edit"></el-step>
        <el-step title="发布章节" icon="el-icon-upload"></el-step>
        <el-step title="发布小节" icon="el-icon-picture"></el-step>
      </el-steps>
    </div>


    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="200px" style="margin-top: 10px">
      <el-form-item label="课程标题" prop="courseName">
        <el-input style="width: 800px" v-model="dataForm.courseName" placeholder="请输入课程标题"></el-input>
      </el-form-item>

      <el-form-item label="课程封面" prop="courseHover">
        <div class="avatar-container">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/minio/upload"
              :show-file-list="false"
              :on-preview="handlePictureCardPreview"
              :on-success="handleUploadSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 150px;height: 150px" v-if="dataForm.courseHover" :src="dataForm.courseHover"
                 class="avatar" alt="">
            <el-button v-else size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </el-form-item>


      <el-form-item style="margin-top: 50px" label="课程简介" prop="courseDescription">

        <el-input
            type="textarea"
            placeholder="请输入课程描述(不超过一百个字)"
            v-model="dataForm.courseDescription"
            maxlength="100"
            rows="3">
        </el-input>
      </el-form-item>


      <el-form-item label="课程类型" prop="courseTypeName" style="margin-top: 20px">
        <el-select v-model="dataForm.courseTypeName" placeholder="请选择课程类型">
          <el-option
              v-for="item in typeOption"
              :key="item.id"
              :label="item.courseTypeName"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <span class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">发布</el-button>
      </span>
    </el-form>

  </div>
</template>


<style scoped>
.container {
  background-color: #fff;
  height: 100%;
  width: 1200px;
  margin-left: 200px;
  position: relative;
  display: flex;
  flex-direction: column; /* 使用列布局 */
  justify-content: space-between; /* 使子元素在容器中垂直方向上分布均匀 */
}

/* 将表单内容放在容器的上半部分 */


/* 将按钮放在底部 */
.dialog-footer {
  display: flex;

  justify-content: center;
  margin-bottom: 15px;
}
</style>